<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="68px">
      <el-form-item label="流程名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入流程名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="small" @click="handleAdd" >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="small" :disabled="single" @click="handleUpdate" >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="small" :disabled="multiple" @click="handleDelete" >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="small" @click="handleExport" >导出</el-button>
      </el-col>
      <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="ddFlowList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column v-if="true" label="钉钉流程主键" align="center" prop="id"/>
      <el-table-column label="流程名称" align="center" prop="name" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button size="small" type="text" @click="handleUpdate(scope.row)" >修改</el-button>
          <el-button size="small" type="text" @click="handleDesigner(scope.row)" >设计</el-button>
          <el-button size="small" type="text" @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />

    <!-- 添加或修改钉钉流程对话框 -->
    <el-dialog v-model="open" :title="title" width="500px" append-to-body destroy-on-close>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="name" label="流程名称">
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
      </el-form>

      <div style="height: 50px; text-align: center;">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog v-model="designerOpen" :title="designerData.name" append-to-body fullscreen>
      <ding-designer :key="designerOpen" ref="ddDesigner" v-loading="designerData.loading" style="border:1px solid rgba(0, 0, 0, 0.1)" :designer-data="flowJsonData" @save="onSaveDesigner" />
    </el-dialog>
  </div>
</template>

<script setup  lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { listDdFlow, getDdFlow, delDdFlow, addDdFlow, updateDdFlow } from '@/api/workflow/ddFlow';
// import DingDesigner from '@/components/DingDesigner';

// 响应式数据
const buttonLoading = ref(false);
const loading = ref(true);
const ids = ref<number[]>([]);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);
const total = ref(0);
const ddFlowList = ref([]);
const title = ref('');
const open = ref(false);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  name: undefined
});
const designerOpen = ref(false);
const designerData = reactive<any>({
  loading: false,
  id: null,
  name: '',
  flowData: ''
});
const flowJsonData = reactive<any>({});
const form = ref<any>({
  id: undefined,
  name: undefined,
  flowData: undefined,
  createBy: undefined,
  createTime: undefined,
  updateBy: undefined,
  updateTime: undefined
});
const rules = reactive({
  id: [
    { required: true, message: '钉钉流程主键不能为空', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '流程名称不能为空', trigger: 'blur' }
  ]
});

// 获取钉钉流程列表
const getList = async () => {
  loading.value = true;
  const response = await listDdFlow(queryParams);
  ddFlowList.value = response.rows;
  total.value = response.total;
  loading.value = false;
};

// 搜索按钮操作
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置按钮操作
const resetQuery = () => {
  // 重置查询表单逻辑
  // 这里需要根据实际的表单组件来重置表单
};

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map(item => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
};

// 新增按钮操作
const handleAdd = () => {
  open.value = true;
  title.value = '添加钉钉流程';
};

// 修改按钮操作
const handleUpdate = (row) => {
  // 修改逻辑
  loading.value = true;
  getDdFlow(row.id || ids.value).then(response => {
    loading.value = false;
    form.value = response.data;
    open.value = true;
    title.value = '修改钉钉流程';
  });
};

// 钉钉设计按钮操作
const handleDesigner = (row) => {
  // 设计按钮逻辑
  if (row.id) {
    let flowData = JSON.parse(row.flowData);
    if (flowData && flowData.hasOwnProperty('processData')) {
      flowJsonData.processData = flowData.processData;
    } else {
      flowJsonData.processData = null;
    }
    designerData.id = row.id;
    designerData.name = row.name || '';
    designerOpen.value = true;
  }
};

// 钉钉流程更新
const onSaveDesigner = (flowData) => {
  designerData.flowData = JSON.stringify(flowData);
  designerData.loading = true;
  updateDdFlow(designerData).then(() => {
    designerOpen.value = false;
    getList();
  }).finally(() => {
    designerData.loading = false;
  });
};

// 提交按钮
const submitForm = () => {
  form.value = { id: undefined, name: undefined, flowData: undefined, createBy: undefined, createTime: undefined, updateBy: undefined, updateTime: undefined };
};

// 删除按钮操作
const handleDelete = (row) => {

};

// 导出按钮操作
const handleExport = () => {
  // 导出逻辑
  // 这里需要根据实际的导出逻辑来实现导出功能
};

onMounted(() => {
  getList();
});
</script>
